<template>
  <div class="index">
    <export-card v-bind="list" />
    <div class="box" @click="$emit('handleClick', list.id)">
      <p class="title fz12">病情：</p>
      <p class="content">{{ list.title }}</p>
    </div>
    <div class="btn-row">
      <div class="btn todo fz12" v-if="showEvaluate()" @click="goEvalue">去评价</div>
      <div class="btn done fz12" v-if="list.appraise" @click="seeEvalue">已评价</div>
    </div>
    <div class="line" v-if="showLine"></div>
  </div>
</template>

<script>
import exportCard from '../expert-card/index.vue'
export default {
	name: 'index',
	components: {
		exportCard,
	},
	props: {
		list: {
			type: Object,
			default: function () {
				return {
					name: '李华山',
					rate: 4,
					job: '副教授',
					company: '农业研究院',
					date: '2020-12-24 12:00:00',
					orderTime: '2021-02-05',
					notice:
            '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好或哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈好或哈哈哈哈哈哈哈哈哈哈哈好或或或或',
					isResponse: true,
				}
			},
		},
		showLine: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: 'online',
		},
	},
	data() {
		return {
			obj: this.list,
			value: 3,
		}
	},

	methods: {
		goEvalue() {
			this.$router.push(`/my-service/evaluation/${this.list.type}/${this.list.id}`)
		},
		seeEvalue() {
			this.$router.push(`/my-service/seeEvaluation/${this.list.type}/${this.list.id}`)
		},
		showEvaluate() {
			if (this.list.appraise) {
				return false
			}
			if (this.$route.name === 'evaluation') {
				return false
			}
			if (this.type === 'visit') {
				return true
			}
			if (this.list.status) {
				return true
			}
			return false
		},
	},
}
</script>

<style lang='scss' scoped>
.index {
  width: 100%;
  background-color: #fff;
//   overflow-x: hidden;
  .box {
    box-sizing: border-box;
    padding: 10px;
    background-color: #f9f9f9;
    .title {
      margin: 0;
      color: "#ccc";
    }
    .content {
      margin: 8px 0 0;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  overflow: hidden;
    }
    .order {
		.title {
			margin-top: 10px;
		}
    }
  }
  .btn-row {
    padding-top: 8px;
    text-align: right;
    .btn {
    	padding: 7px 10px;
    	border-radius: 15px;
      	display: inline-block;
	  	width: 65px;
	  	height: 28px;
		text-align: center;
		font-size: 13px;
	  	&.todo {
			color: #E8541E;
			border: 1px solid #E8541E;
		}	
		&.done {
			color: rgb(134, 134, 134);
			border: 1px solid rgb(214, 214, 214);
		}
    }
  }
  .line {
    margin-top: 10px;
    width: calc(100% + 16px);
    height: 1px;
    background-color: #EEEEEE;
  }
}
</style>
